<template>
  <div class="dashboard-container" style="width: 1200px">
    <div class="dashboard-text">昵称: {{ name }}</div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>账号信息   #{{ user.account }}</span>
          </div>
          <el-row>
            <el-col :span="8">
              <div class="text item">
                当前人脉数：{{userData.friendNum}}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="text item">
                参与人脉圈个数：{{userData.networkNum}}
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <div align="center">
          <el-card
            class="friend-card"
            align="center"
            shadow="hover"
          >
            <div align="center">
              <el-table
                ref="tableList"
                v-loading="listLoading"
                :data="datalist"
                style="width: 100%"
                :highlight-current-row="true"
                max-heigh="600px"
              >
                <el-table-column label="智能推荐" align="center">
                  <template slot-scope="scope">
                    <el-row type="flex" justify="start" align="top">
                      <el-col :span="5">
                        <el-avatar :size="medium" :src="scope.row.user.avatar"></el-avatar>
                      </el-col>
                      <el-col :span="11">
                        <div class="text-nickName" align="start">{{scope.row.user.nickName}}</div>
                        <div class="text-brief" align="start">{{scope.row.user.signature}}</div>
                      </el-col>
                      <el-col :span="8">
                        <div class="text-nickName" align="start">共同好友：</div>
                        <div class="text-brief" align="start">{{scope.row.sameFriendNum}}个</div>
                      </el-col>
                      <el-col :span="8">
                        <div class="text-nickName" align="start">关联度：</div>
                        <div class="text-brief" align="start">{{scope.row.correlationDegree}}</div>
                      </el-col>
                      <el-col :span="9">
                        <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                          <el-button icon="el-icon-user" @click="showCardDialog(scope.row.user, 'recommend')" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="添加人脉" placement="bottom">
                          <el-button icon="el-icon-plus" @click="friendRequest(scope.row.user.id)" circle></el-button>
                        </el-tooltip>
                      </el-col>
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!-- 对话框 -->
    <el-dialog title="名片" align="center" :visible.sync="cardDialogVisible" width="700px" @close="cardDialogVisible = false">
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div class="block">
            <el-avatar :size="80" :src="cardInfo.avatar"></el-avatar>
          </div>
          <div style="padding: 14px;">
            <div class="text-nickName" :style="{marginBottom: '10px'}">{{cardInfo.nickName}}</div>
            <div class="text-brief-long">{{cardInfo.signature}}</div>
            <el-tag size="small" type="success" class="card-tag">{{cardInfo.profession}}</el-tag>
            <el-tag size="small" class="card-tag">{{ cardInfo.gender === 1 ? '男' : '女' }}</el-tag>
            <div class="text-info">职业：{{cardInfo.profession}}</div>
            <div class="text-info">生日：{{cardInfo.birthday}}</div>
            <div class="text-info">手机：{{cardInfo.phone}}</div>
            <div class="text-info">邮箱：{{cardInfo.email}}</div>
            <div slot="footer" align="center">
              <el-button v-if="this.type === 'recommend'" type="primary" round size="small" @click="friendRequest(cardInfo.id)">发送好友请求</el-button>

            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import request from "@/utils/request";

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'user'
    ])
  },
  data() {
    return {
      pageSize: 5,
      currentPage: 1,
      datalist: [],
      cardInfo: {},
      userData: {
        friendNum: '0',
        networkNum: '0'
      },
      listLoading: false,
      cardDialogVisible: false,
    }
  },
  created() {
    this.getDataList()
    this.getUserData()
  },
  methods: {
    getDataList() {
      this.listLoading = true
      const params = this.user
      request({
        url: '/intelligent/recommend',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') return this.$message.warning(response.retMsg)
        this.datalist = response.data
        console.log(response.data)
        this.total = response.data.length
        console.log(this.total)
        this.listLoading = false
      })
    },

    getUserData() {
      const params = {}
      params.userId = this.user.id
      request({
        url: '/user/data',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') return this.$message.warning(response.retMsg)
        this.userData = response.data
        console.log(response.data)
      })
    },

    // 显示名片
    showCardDialog(row, str) {
      console.log(row)
      this.cardInfo = row
      this.type = str
      this.cardDialogVisible = true
    },
    // 发送好友请求
    async friendRequest(id){
      this.cardInfo.id
      const confirmResult = await this.$confirm(
        '确定向该用户发送好友请求吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      if (confirmResult === 'confirm') {
        const params = {}
        params.userId = this.user.id
        params.recommendId = this.user.id
        params.friendId = id
        params.reference = this.user.nickName
        params.recommendRank = 0
        params.toRank = 1
        request({
          url: '/recommend/sendFriendRequest',
          method: 'get',
          params
        }).then(response => {
          if (response.retCode !== '200') return this.$message.warning(response.retMsg)
          this.$message.success('发送请求成功！')
        })
      }
    },
  },

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-upload__tip {
  line-height: 1.2;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.friend-card {
  margin: 1px;
  padding: 0px;
}

.box-card {
  margin: 1px;
  padding: 0px;
}

.text-nickName {
  color: #409EFF;
}

.text-brief {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #999;
}

.text-brief-long {
  font-size: 13px;
  color: #999;
  width: 40%;
  margin-bottom: 10px;
}

.text-info {
  font-size: 16px;
  width: 40%;
  margin-bottom: 10px;
}

.card-tag {
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
